﻿var React = require('react');
var ReactDOM = require('react-dom');
var StateManager = require('../../store/main/GoStateManager');

//当前步状态指示器，可以指标当前步数、落子方、是否处理布局状态等信息
class CurrentLabel extends React.Component{
    constructor(props){
        super(props);
        //使用全局的状态作为初始状态
        this.state={
            index:StateManager.current.index,
            black:StateManager.current.goBlack,
            place:StateManager.current.place,
        };
        //设置currentChange函数的this
        this.currentChange=this.currentChange.bind(this);
        //注册事件监听器
        StateManager.subCurrentChange(this.currentChange);
    }

    //状态改变事件监听器，调整组件的状态
    currentChange(current){
        this.setState({
            index:current.index,
            black:current.goBlack,
            place:current.place,
        });
    }

    render(){
        return <span>
            <strong>当前步数：</strong>{this.state.index}
            <strong>　落子方：</strong>{this.state.black==true?'黑方':'白方'}
            <strong>　是否是布局状态：</strong>{this.state.place==true?'布局':'行棋'}
        </span>;
    }
}

//状态指标器测试按钮：下一步
class CurrentTestBtn_Next extends React.Component{
    constructor(props ){
        super(props);
        this.state={}
        this.clickHandle = this.clickHandle.bind(this);
    }

    clickHandle(){
        //点击事件，通知状态管理器，下一步
        StateManager.next();
    }

    render(){
        return <button className="btn btn-primary" onClick={this.clickHandle}>下一步</button>;
    }
}

//状态指标器测试按钮：切换布局状态
class CurrentTestBtn_Place extends React.Component{
    constructor(props ){
        super(props);
        this.state={}
        this.clickHandle = this.clickHandle.bind(this);
    }

    clickHandle(){
        StateManager.setPlace(!StateManager.current.place);
    }

    render(){
        return <button className="btn btn-primary" onClick={this.clickHandle}>切换布局状态</button>;
    }
}

//状态指标器测试按钮：切换布局状态
class CurrentTestBtn_Restart extends React.Component{
    constructor(props ){
        super(props);
        this.state={}
        this.clickHandle = this.clickHandle.bind(this);
    }

    clickHandle(){
        //点击事件，重新开始
        StateManager.restart();
    }

    render(){
        return <button className="btn btn-primary" onClick={this.clickHandle}>重新开始</button>;
}
}


ReactDOM.render(
  <div>
    <CurrentLabel /><br/>
    <CurrentTestBtn_Next />&nbsp;
    <CurrentTestBtn_Place />&nbsp;
    <CurrentTestBtn_Restart />
  </div>,
  document.getElementById('main-container')
);